<template>
  <div>
    <el-dialog
      top="5vh"
      title="题目预览"
      :visible="showPreview"
      min-width="50%"
      width="60%"
      @close="handleClose"
      @open="PreviewSubject"
    >
      <div class="dialog-box">
        <div class="top-box">
          <div class="item">
            【题型】：{{ subjectInfo.questionType | questionTypeFilter }}
          </div>
          <div class="item">【编号】：{{ subjectInfo.id }}</div>
          <div class="item">
            【难度】：{{ subjectInfo.difficulty | difficultyFilter }}
          </div>
          <div class="item">【标签】：{{ subjectInfo.tags }}</div>
          <div class="item">【学科】：{{ subjectInfo.subjectName }}</div>
          <div class="item">【目录】：{{ subjectInfo.directoryName }}</div>
          <div class="item">【方向】：{{ subjectInfo.direction }}</div>
          <!-- <hr> -->
        </div>

        <div class="box-question">
          <p>【题干】：</p>
          <p style="color:blue" v-html="subjectInfo.question"></p>

          <!-- 单选 -->
          <div class="box-two" v-if="showWhich === '1'">
            <p>单选题 选项：（以下选中的选项为正确答案）</p>
            <el-radio-group :value="radio">
              <el-radio
                v-for="item in options"
                :key="item.id"
                :label="item.code"
                >{{ item.title }}</el-radio
              >
            </el-radio-group>
          </div>

          <!-- 多选 -->
          <div class="box-two" v-if="showWhich === '2'">
            <p>多选题 选项：（以下选中的选项为正确答案）</p>
            <el-checkbox-group :value="checkList">
              <el-checkbox
                :label="item.code"
                v-for="item in options"
                :key="item.id"
              ></el-checkbox>
            </el-checkbox-group>
          </div>

          <!-- 简单 -->
          <div class="box-two" v-if="showWhich === '3'">
            <!--  -->
          </div>
        </div>

        <div class="box-three">
          <span>【参考答案】：</span>
          <el-button type="danger" size="mini" @click="isShowVideo = true"
            >视频答案预览</el-button
          >
          <video v-show="isShowVideo" controls :src="videoUrl"></video>
        </div>

        <div class="box-four" >
          <span>【答案解析】：</span>
          <span v-html="subjectInfo.answer"> </span>
        </div>

        <div class="box-five">【题目备注】：{{ subjectInfo.remarks }}</div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'handlePreview',
  props: {
    showPreview: {
      type: Boolean,
      default: false
    },
    subjectId: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      showWhich: '', // v-if 单选 1  多选 2  简答 3
      options: [], // 选项
      radio: '1', // 单选
      checkList: [], // 多选列表
      subjectInfo: {}, // 题目信息
      // subjectList: [], // 题目列表
      isShowVideo: false,
      question: '', // 简单题题干
      videoUrl: '' // 视频地址
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:showPreview', false)
      this.subjectInfo = {}
      this.isShowVideo = false
      this.showWhich = ''
      this.videoUrl = ''
      this.options = []
    },
    // 获取题目列表
    async getSubjectInfo () {
      const detailInfo = await detail({
        id: this.subjectId
      })
      // console.log(detailInfo)
      const { data } = detailInfo
      this.subjectInfo = data
      this.showWhich = data.questionType
      this.videoUrl = data.videoURL
      this.options = data.options
      // if (data.questionType === '1') {
      //   this.radio = data.options
      // }
      // 单选
      if (data.questionType === '1') {
        data.options.find(item => {
          if (item.isRight === 1) {
            this.radio = item.code
          }
        })
      }
      // 多选
      if (data.questionType === '2') {
        data.options.forEach(item => {
          if (item.isRight === 1) {
            this.checkList.push(item.code)
          }
        })
      }
      // console.log(this.radio)
    },
    // 预览
    async PreviewSubject () {
      this.getSubjectInfo({
        page: 1,
        pageSize: this.total
      })
    }
  }
}
</script>

<style scoped lang="scss">
/* @import url(); 引入css类 */
.dialog-box {
  width: 100%;

  .top-box {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;

    .item {
      width: 25%;
      margin-top: 20px;
    }
  }
  .box-question {
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
  }
  .box-two {
    font-size: 14px;
    // border-bottom: 1px solid #333;
    // margin-bottom: 5px;
  }

  .box-three {
    border-bottom: 1px solid #333;
    video {
      display: block;
      margin-top: 10px;
      width: 400px;
      height: 300px;
      margin-bottom: 10px;
    }
  }
  .box-four {
    padding: 20px 0;
    height: 50px;
    min-width: 400px;
    // margin-bottom: 10px;
    border-bottom: 1px solid #333;

    span {
      float: left;
      height: 30px;

      ::v-deep {
        p{
          margin: 0;
        }
      }
    }
  }
  .box-five {
    padding: 20px 0;
  }
}
::v-deep {
  .el-radio {
    display: block;
    margin-top: 15px;

     &:first-child {
        margin: 0;
    }
  }
  .el-checkbox {
    display: block;
    margin-top: 15px;

     &:first-child {
        margin: 0;
    }
  }
}
</style>
